import React, {Component} from 'react';
import Swiper from "swiper";
import {Navigation,Pagination} from "swiper/modules";
import 'swiper/swiper-bundle.css'
Swiper.use([Navigation,Pagination])
class App extends Component {
    state = {
        list: ['00', '01', '02', '03', '04', '05', '06', '07', '08', '09'],
    }

    componentDidMount() {
        new Swiper(".swiper",{
            pagination:{
                el:'.swiper-pagination'
            }
        })
    }

    render() {
        return (
            <div>
                <div className="swiper" style={{
                    height:'200px',
                    background:'yellow'
                }}>
                    <div className="swiper-wrapper">
                        {
                            this.state.list.map((item,index)=>
                                <div key={index} className="swiper-slide">{item}</div>
                            )
                        }
                    </div>
                    <div className="swiper-pagination"></div>
                </div>
            </div>
        );
    }
}

export default App;


/*
{/!*<！--如果需要分页器 -->*!/}
<div class="swiper-pagination"></div>
{/!*<！--如果需要导航按钮 -->*!/}
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
{/!*<！--如果需要滚动条-->*!/}
<div class="swiper-scrollbar"></div>
*/
